<template>
  <div class="message">
    <NavBar title="消息">
      <template #right>
        <span class="message_right" @click="handleClick('contact')">联系人</span>
      </template>
    </NavBar>
    <div class="message_tab_wrap">
      <div class="tab_item" v-for="item in tabList" :key="item.name" @click="handleClick(item.name)">
        <div class="tab_item_Icon">
          <Icon :name="item.icon" color="#fff"></Icon>
        </div>
        <span class="tab_item_text">{{ item.text }}</span>
      </div>

    </div>
    <!-- 空数据时 -->
    <div class="message_empty">
      <img src="http://43.138.15.137:8080/assets/img/2.e9881162.jpg" alt="">
    </div>

  </div>
</template>

<script setup>
import NavBar from '@/components/Common/NavBar/index.vue'
import Icon from '@/components/Common/Icon/index.vue'
import { ref } from 'vue'



// 定义一个数组
const tabList = ref([
  {
    name: 'fan',
    icon: 'fensi',
    text: '粉丝'
  },
  {
    name: 'like',
    icon: 'aixin',
    text: '赞'
  },
  {
    name: 'atMy',
    icon: 'aite',
    text: '@我的'
  },
  {
    name: 'comment',
    icon: 'pinglun',
    text: '评论'
  }
])


import { useRouter } from 'vue-router'

const router = useRouter()

const handleClick = async (name) => {
  router.push({
    name
  })
}



</script>

<style lang="scss" scoped>
.message {
  background-color: #161622;
  height: 100vh;

  .message_right {
    font-size: 14px;
    color: #fff;
  }

  .message_tab_wrap {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 0 12px;
    gap: 15px;
    z-index: 999;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    border-bottom: 1px solid #262732;
    padding-bottom: 10px;

    .tab_item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 5px;
      padding: 5px 10px;
      border-radius: 5px;
      cursor: pointer;

      &:nth-child(1) {
        .tab_item_Icon {
          background-color: #4f89fb;
        }
      }

      &:nth-child(2) {
        .tab_item_Icon {
          background-color: #f9355f;
        }
      }

      &:nth-child(3) {
        .tab_item_Icon {
          background-color: #1ec362;
        }
      }

      &:nth-child(4) {
        .tab_item_Icon {
          background-color: #a753ec;
        }
      }



      .tab_item_Icon {
        width: 45px;
        height: 45px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #000;
        border-radius: 6px;


      }
    }

  }

  .message_empty {
    width: 314px;
    height: 340px;
    margin: 0 auto;

    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>